<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学校荣誉</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/school_enrollment_detalis.css">
</head>

<body>
    <div id="container">
        <div class="contain">
            <div class="header">
                <div class="header_title">荣誉详情</div>
                <a onclick="history.back()">
                    <img src="image/return.png" alt="" class="return">
                </a>
            </div>
            <div style="height: 40px;"></div>
            <div class="content" id="vue-root">
                <div class="content_title" v-text="honor.name"></div>
                <img v-if="honor.pic" :src="getMedia(honor.pic)" class="content_img">
                <video v-if="honor.video" :src="getMedia(honor.video)" class="content_video"
                    controls="controls"></video>
                <div class="introduce" v-text="honor.intro"></div>
                <div class="time" v-text="format(honor.time)"></div>
            </div>
        </div>
    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>

    <script src="/js/common.js"></script>

    <script>
        var app = new Vue({
            el: '#vue-root',
            data: {
                honor: {}
            },
            created: function () {
                axios.get('/api/honor/' + params().id).then(function (res) {
                    this.honor = res.data;
                }.bind(this));
            },
            methods: {
                getMedia: function (pic) {
                    return '/static/' + this.honor.schoolId + '/honor/' + pic;
                },
                format: function (time) {
                    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
                }
            }
        });

    </script>

</body>

</html>